<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米首页</title>
		<!-- 二、外部样式表： 按照页面建议结构添加对应css-->
		<link rel="stylesheet" href="css/header.css" />
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/footer.css" />
		<link rel="stylesheet" href="css/public.css" />
		<script src="js/jquery-1.11.1.js"></script>
		<script>
			$(function(){
			$("header div#wrapper div.head_right ul li.li_right").hover(function(){
				$("header div.head_right div.head_rights").css("display","block");
			},function(){
				$("header div.head_right div.head_rights").css("display","none");
			});
			$("aside ul li").hover(function(){
				$("aside ul.sidebar div.sidebar_out").css("display","block");
			},function(){
				$("aside ul.sidebar div.sidebar_out").css("display","none");
			});
			var se=$("main nav#wrapper").offset().top;
			
			//滚动值：BOM对象+事件源
			//$(window)抓取与面上的window对象，监听窗口改变，滚动
			//理解： 实时抓取页面滚动值
			$(window).scroll(function(){
			//滚动值：获取页面滚动的位置
			//scrollTop()获取页面滚动的垂直距离
			var st=$(window).scrollTop();
			//判断   固定值大于滚动值，滚动超出200，实现切换：吸顶效果
			if(st>se){
				//条件成立：大于200   切换吸顶效果
				$("main nav#wrapper").addClass("sticky");
			}else{
				//条件不成立：小于200
				$("main nav#wrapper").removeClass("sticky");
			}
			});
			});
		</script>
	</head>
	<body>
		<!-- 一、html结构   简易三层结构
		【结构化】语义化标记：header  main  footer
		【替代div+别名   有利于SEO优化】
		-->
		<header>
			<!-- 两列布局  起别名  id用于定位  class用于微调-->
			<!-- 中控区：页面两侧留白，控制整页宽度 -->
			<div id="wrapper">
				<div class="head_left">
					<ul class="aside">
					<li><a href="#">小米网</a></li>
					<li><a href="#">MIUI</a></li>
					<li><a href="#">多看阅读</a></li>
					<li><a href="#">云服务</a></li>
					<li><a href="#">小米网移动版</a></li>
					<li><a href="#">问题反馈</a></li>
					<li><a href="#" class="a9">Select Region</a></li>
				</ul>
				</div>
				<div class="head_right">
					<ul>
						<!-- 精灵图使用   后缀，icon
						 1.使用文本样式元素补位：i、s、b、u
						 2.使用矢量图.png【不失帧】，icon存入png
						 好处：避免多次命名，减少服务器请求
						 3.使用内边距    文本样式【撑大】
						 4.如果是用矢量图：精灵图模式，需要定位
						 -->
					<li class="li_right"><i class="shop"></i><a href="#" class="fix">购物车(0)</a></li>
					<!-- <li class="i1"><div><a href="" class="a1"><img src="img/buy.png" alt="" />购物车(0)</a></div></li> -->
					<li><a href="#" class="a2">注册</a></li>
					<li><a href="#" class="a3">登录</a></li>
				</ul>
				<div class="head_rights"><p>购物车中还没有商品，赶紧选购吧！</p></div>
				</div>
			</div>
		</header>
		<main>
			<!-- 面包屑导航   结构化元素  nav导航 -->
			<nav id="wrapper">
				<nav class="main_left">
					<ul>
					<li class="i1" style="margin-left: 294px;"><img src="img/logo.png" alt="" /></li>
					<li class="i2"><img src="img/donghua.gif" alt="" /></li>
					<li><a href="">小米盒子</a></li>
					<li><a href="">红米</a></li>
					<li><a href="">平板</a></li>
					<li><a href="">电视</a></li>
					<li><a href="">盒子</a></li>
					<li><a href="">路由器</a></li>
					<li><a href="">智能硬件</a></li>
					<li><a href="">服务</a></li>
					<li><a href="">社区</a></li>
				</ul>
				
				</nav>
				<nav class="main_right">
					<ul>
						<li class="i1">
							<div class="right_1" style="margin-right: 308px;">
								<img src="img/search.png" alt="" />
							</div>
						</li>
						<li class="i2">
							<div class="right_2">
								<span>平衡车</span>
								<span>小米手机4c</span>
							</div>
						</li>
					</ul>
				</nav>
			</nav>
			<div id="main_1">
			<!-- 左栏区 -->
			<aside>
				<ul class="sidebar">
					<!-- 弹出框 -->
					<div class="sidebar_out"></div>
					<li>手机 平板 电话卡</li>
					<li>电视 盒子</li>
					<li>路由器 智能硬件</li>
					<li>移动电源 插线板</li>
					<li>耳机 音响</li>
					<li>电池 存储卡</li>
					<li>保护套 后盖</li>
					<li>贴膜 其他配件</li>
					<li>米兔 服装</li>
					<li>箱包 其他周边</li>
				</ul>
			</aside>
			<!-- 轮播图  结构化元素：图片、图标、代码片段-->
			<figure>
				<div class="main">
					<!-- 2.id="animation"针对轮播添加效果 -->
					<div id="animation"></div>
					<!-- 3.class="container"轮播图空间范围 -->
					<div class= "container">
						<!-- 4.class=banner  针对轮播图效果功能
						 lazyload轮播图功能为：延迟加载-->
						<div class="banner" id="lazyload">
							<!-- 放图片 -->
							<ul>
								<li><img src="img/banner01.jpg" alt="1"></li>
								<li><img src="img/banner02.jpg" alt="2"></li>
								<li><img src="img/banner03.jpg" alt="3"></li>
								<li><img src="img/banner04.jpg" alt="4"></li>
								<li><img src="img/banner05.jpg" alt="5"></li>
							</ul>
						</div>
					</div>
				</div>
				<script src="js/highlight.pack.js"></script>
				<script src="js/jquery-1.11.1.js"></script>
				<script src="js/jquery.terseBanner.min.js"></script>
				<script src="js/script.js"></script>
			</figure>
			</div>
			<!-- ------------------第一排照片--------------------------- -->
			<div id="picture">
				<div class="c1"><img src="img/left.png" alt="1" /></div>
				<div class="c2">
					<ul>
						<li><img src="img/subnav_icon03.png" alt="3" /></li>
						<li><img src="img/subnav_icon02.jpg" alt="2" /></li>
						<li><img src="img/subnav_icon01.png" alt="1" /></li>
					</ul>
				</div>
			</div>
			<!-- ----------------小米明星单品---------------- -->
			<div id="single_product">
				<div class="word">小米明星单品</div>
				<div class="arrow">
					<ul>
						<li class="arrow_left">></li>
						<li class="arrow_right"><</li>
					</ul>
				</div>
				<div class="product_list">
					<ul>
						<li class="i1" style="border-top:2px solid #ffaa7f;">
							<img src="img/chazuo.png" alt="" style="margin: 40px 0;"/>
							<h3>小米智能插座 基础版</h3>
							<p>手机远程遥控，让普通家具变智能</p>
							<p style="color: #ff6709;margin: 17px; ">699元</p>
						</li>
						<li class="i2" style="border-top:1px solid #55aa7f;">
							<img src="img/jinghuaqi.png" alt="" style="margin: 20px 0;" />
							<h3>小米空气净化器2</h3>
							<p>净化能力高达310m³/h</p>
							<p style="color: #ff6709;margin: 17px; ">699元</p>
						</li>
						<li class="i3" style="border-top:1px solid #00aaff;">
							<img src="img/chaban.png" alt="" style="margin: 70px 0;" />
							<h3>小米智能插线板</h3>
							<p>手机远程控制家中电器，智能节电</p>
							<p style="color: #ff6709;margin: 17px;">69元</p>
						</li>
						<li class="i4" style="border-top:1px solid #ff5500;">
							<img src="img/erji.png" alt="" style="margin: 24px 0;" />
							<h3>小米圈铁耳机</h3>
							<p>动圈+动铁，双发声单元</p>
							<p style="color: #ff6709;margin: 17px;">69元</p>
						</li>
						<li class="i5" style="border-top:1px solid #00ff00;">
							<img src="img/luyouqi.png" alt="" style="margin: 28px 0;"/>
							<h3>小米路由器  青春版</h3>
							<p>将高性能路由器，凝聚于掌心大小</p>
							<p style="color: #ff6709;margin: 17px;">79元</p>
						</li>
					</ul>
				</div>
			</div>
			<!-- -------------------主体第二部分----------------------------------------------------- -->
			<div id="main_2">
				<!-- ---------------智能硬件-------------------------------------------------------- -->
				<div class="part_1">
				<div class="wrod_1" ><p style="color: black;font-size: 22px;">智能硬件</p></div>
				<ul>
					<li><a href="" style="color: black;">查看全部</a><i class="arrow_right"></i></li>
				</ul>
				</div>
				<div class="hardware">
					<div class="picture">
					<p  style="color: black; font-size: 22px;" >米兔儿童电话手表<p>
					<p style="color:black; font-size: 14px;">安全防走失，宝贝的贴身护卫</p>
					<p class="p1" style="color: #00a8ff; font-size:22px ;">299元</p>
					</div>
					<div class="shop_1">
						<ul>
							<li class="i1">
								<img src="img/haraware_anfang.png" alt="" />
								<h3>小米智能安防套装</h3>
								<p style="font-size: 12px;">智能警戒，为您的家增添一份安心</p>
								<p style="color: #ff6709;">699元</p>
							</li>
							<li class="i2" >
								<img src="img/haraware_shouhuan.png" alt="" />
								<h3>小米手环 光感版</h3>
								<p style="font-size: 12px;">实时监测心率，科学运动</p>
								<p style="color: #ff6709; ">99元</p>
							</li>
							<li class="i3">
								<img src="img/haraware_luyouqi.png" alt="" />
								<h3>小米路由器</h3>
								<p style="font-size: 12px;">更安全更稳定，安全发售</p>
								<p style="color: #ff6709;">149元</p>
							</li>
							
							<li class="i4">
								<img src="img/haraware_tizhongcheng.png" alt=""  style="margin: 62px 0;"/>
								<h3>小米体重秤</h3>
								<p style="font-size: 12px;">高精度压力传感器，手机管理全家健康</p>
								<p style="color: #ff6709;">99元</p>
							</li>
						</ul>
					</div>
					<div class="shop_2">
						<ul>
							<li class="i5">
								<img src="img/haraware_light.png" alt="" />
								<h3>Yeelight床头灯</h3>
								<p style="font-size: 12px;">触摸式操作，给卧室1600万种颜色</p>
								<p style="color: #ff6709;">699元</p>
							</li>
							<li class="i6">
								<img src="img/dianfanbao_icon05.jpg" alt="" style="margin: 24px;" />
								<h3>小米智能摄像机 夜视版</h3>
								<p style="font-size: 12px;">能看能听能说，手机远程观看</p>
								<p style="color: #ff6709;">149元</p>
							</li>
							<li class="i7">
								<img src="img/haraware_xieya.png" alt=""  style="margin: 2px;"/>
								<h3>iHealth智能血压计（蓝牙版）</h3>
								<p style="font-size: 12px;">送给父母的健康礼物</p>
								<p style="color: #ff6709;">199元</p>
							</li>
							
							<li class="i8" >
								<img src="img/haraware_xiaoyi.png" alt="" />
								<h3>小米运动相机</h3>
								<p style="font-size: 12px;">边玩边录边拍，手机随时分享</p>
								<p style="color: #ff6709;">399元</p>
							</li>
						</ul>
					</div>
				</div>
				<!-- ---------------搭配------------------------------------------------------- -->
				<div class="match">
					<div class="word">
						<div class="wrod_left" style="color: black;font-size: 22px;">搭配</div>
							<ul class="wrod_right">
								<li><a href="">电池储存卡</a></li>
								<li><a href="">电源</a></li>
								<li><a href="">耳机音箱</a></li>
								<li><a href="">热门</a></li>
							</ul>
						</div>
						<div class="picture">
							<div class="picture_top">
								<ul>
									<li class="i1"><img src="img/dapei_icon01.png" alt="" /></li>
									<li class="i2" style="background: white;">
										<img src="img/dapei_icon03.png" alt=""  style="margin: 28px;"/>
										<h3>小米路由器3</h3>
										<p style="font-size: 12px;">更安全更稳定，安全发售</p>
										<p style="color: #ff6709;">149元</p>
									</li>
									<li class="i3" style="background: white;">
										<img src="img/dapei_icon04.png" alt="" style="margin: 32px;" />
										<h3>小米手环 光感版</h3>
										<p style="font-size: 12px;">实时监测心率，科学运动</p>
										<p style="color: #ff6709;">99元</p>
									</li>
									<li class="i4" style="background: white;">
										<img src="img/dapei_icon05.png" alt="" style="margin: 82px;"/>
										<h3>小米智能安防套装</h3>
										<p style="font-size: 12px;">智能警戒，为您的家增添一份安心</p>
										<p style="font-size: 12px;color: #ff6709;">699元</p>
									</li>
									<li class="i5" style="background: white;">
										<img src="img/dapei_icon06.png" alt=""  style="margin: 30px;" />
										<h3>小米运动相机</h3>
										<p style="font-size: 12px;">边玩边录边拍，手机随时分享</p>
										<p style="font-size: 12px; color: #ff6709;">399元</p>
										</li>
								</ul>
							</div>
							<div class="picture_bottom">
								<ul>
									<li class="i1"><img src="img/dapei_icon02.png" alt="" /></li>
									<li class="i2" style="background: white;">
										<img src="img/dapei_icon07.png" alt="" style="margin: 30px;" />
										<h3>小米智能摄像机 夜视版</h3>
										<p>能看能听能说，手机远程观看</p>
										<p style="color: #ff6709;">149元</p>
									</li>
									<li class="i3" style="background: white;">
										<img src="img/dapei_icon08.png" alt="" style="margin: 34px;"/>
										<h3>小米智能摄像机 夜视版</h3>
										<p>能看能听能说，手机远程观看	</p>
										<p style="color: #ff6709;">149元</p>
									</li>
									<li class="i4" style="background: white;">
										<img src="img/dapei_icon09.png" alt="" style="margin: 40px;"/>
										<h3>小米智能摄像机 夜视版</h3>
										<p>能看能听能说，手机远程观看	</p>
										<p style="color: #ff6709;">149元</p>
									</li>
									<li class="i5">
										<div><img src="img/content-top_icon01.png" alt="" style="margin-bottom: 8px;"/></div>
										<div><img src="img/content-top_icon02.png" alt="" /></div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				<!-- -------------------------------周边---------------------------------- -->
				<div class="surroudings">
					<div class="word">
						<div class="word_left" style=" color: black; font-size: 22px; line-height: ;">周边</div>
						<ul class="word_right">
							<li><a href="">箱包</a></li>
							<li><a href="">生活周边</a></li>
							<li><a href="">米兔</a></li>
							<li><a href="">服装</a></li>
							<li><a href="">热门</a></li>
						</ul>
					</div>
					<div class="shop">
						<div class="shop_top">
							<ul>
								<li class="i1"><img src="img/peijian_icon01.png" alt="" /></li>
								<li class="i2" style="background: white;">
									<img src="img/peijian_icon03.png" alt="" style="margin: 22px;" />
									<h3 style="color: black;">小米金属鼠标垫 小号</h3>
									<p  style="color: #ff6709; ">49元</p>
									<p>6483人评价</p>
								</li>
								<li class="i3" style="background: white;">
									<img src="img/peijian_icon04.png" alt="" style="margin: 22px;"  />
									<h3 style="color: black;">小米皮质记事本</h3>
									<p  style="color: #ff6709;">19元</p>
									<p>6483人评价</p></li>
								<li class="i4" style="background: white;">
									<img src="img/peijian_icon05.png" alt=""  style="margin: 22px;" />
									<h3 style="color: black;">小米LED随身灯 增强版</h3>
									<p  style="color: #ff6709;">19.9元</p>
									<p>5.6万人评价</p>
								</li>
								<li class="i5" style="background: white;">
									<img src="img/peijian_icon06.png" alt="" style="margin: 22px;"  />
									<h3 style="color: black;">手机支架 小蜜蜂</h3>
									<p  style="color: #ff6709;">19元</p>
									<p>6.9万人评价</p>
								</li>
							</ul>
						</div>
						<div class="shop_bottom">
							<ul>
								<li class="i1">
									<img src="img/peijian_icon02.png" alt="">
								</li>
								<li class="i2" style="background: white;">
									<img src="img/peijian_icon07.png" alt="" style="margin: 22px;"/>
									<h3>小米防尘塞 MI标</h3>
									<p style="color: #ff6709;">3.9元</p>
									<p>5.6万人评价</p>
								</li>
								<li class="i3" style="background: white;">
									<img src="img/peijian_icon08.png" alt="" style="margin: 22px;"/>
									<h3>小米智能摄像机 夜视版</h3>
									<p style="color: #ff6709;">149元</p>
									<p>8461人评价</p>
								</li>
								<li class="i4" style="background: white;">
									<img src="img/peijian_icon09.png" alt="" style="margin: 22px;"/>
									<h3>小米电源线收纳盒</h3>
									<p style="color: #ff6709;">39元</p>
									<p>8461人评价</p>
								</li>
								<li class="i5">
									<div><img src="img/peijian_icon10.png" alt="" style="margin-bottom: 8px;"/></div>
									<div><img src="img/content-top_icon02.png" alt="" /></div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<!-- -------------------------配件------------------------------------------------- -->
				<div class="accessory">
					<div class="word">
						<div class="word_left" style=" color: black; font-size: 22px; line-height: ;">配件</div>
						<ul class="word_right">
							<li><a href="">其他配件</a></li>
							<li><a href="">贴膜</a></li>
							<li><a href="">后盖</a></li>
							<li><a href="">保护套</a></li>
							<li><a href="">热门</a></li>
						</ul>
					</div>
					<div class="shop2">
						<div class="shop2_top">
							<ul>
								<li class="i1"><img src="img/zhoubian_icon01.png" alt="" /></li>
								<li class="i2" style="background: white;">
									<img src="img/zhoubian_icon03.png" alt="" style="margin: 22px;" />
									<h3 style="color: black;">小米自拍杆</h3>
									<p  style="color: #ff6709; ">49元</p>
									<p>6.4万人评价</p>
								</li>
								<li class="i3" style="background: white;">
									<img src="img/zhoubian_icon04.png" alt="" style="margin: 22px;"  />
									<h3 style="color: black;">小米手机5钢化膜(0.22mm)</h3>
									<p  style="color: #ff6709;">29元</p>
									<p>1万人评价</p></li>
								<li class="i4" style="background: white;">
									<img src="img/zhoubian_icon05.png" alt=""  style="margin: 22px;" />
									<h3 style="color: black;">红米手机Note3钢化膜(0.22mm)</h3>
									<p  style="color: #ff6709;">699元</p>
									<p>5.6万人评价</p>
								</li>
								<li class="i5" style="background: white;">
									<img src="img/zhoubian_icon06.png" alt="" style="margin: 22px;"  />
									<h3 style="color: black;">小米Note标准贴膜(2片装)</h3>
									<p  style="color: #ff6709;">19元</p>
									<p>2.1万人评价</p>
								</li>
							</ul>
						</div>
						<div class="shop2_bottom">
							<ul>
							<li class="i1">
									<img src="img/zhoubian_icon02.png" alt="">
								</li>
								<li class="i2" style="background: white;">
									<img src="img/zhoubian_icon07.png" alt="" style="margin: 22px;"/>
									<h3 style="color: black;">小米随身WIFI</h3>
									<p style="color: #ff6709;">19.9元</p>
									<p>30.1万人评价</p>
								</li>
								<li class="i3" style="background: white;">
									<img src="img/zhoubian_icon08.png" alt="" style="margin: 22px;"/>
									<h3 style="color: black;">小米百变随身杯</h3>
									<p style="color: #ff6709;">39元</p>
									<p>1.2万人评价</p>
								</li>
								<li class="i4" style="background: white;">
									<img src="img/zhoubian_icon09.png" alt="" style="margin: 22px;"/>
									<h3 style="color: black;">小米手机5 硅胶保护套</h3>
									<p style="color: #ff6709;">69元</p>
									<p>215人评价</p>
								</li>
								<li class="i5">
									<div><img src="img/zhoubian_icon10.png" alt="" style="margin-bottom: 8px;"/></div>
									<div><img src="img/content-top_icon02.png" alt="" /></div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			<!-- -------------热评产品-------------------------- -->
				<div class="HotProduct">
					<p style="color: black; font-size: 22px;">热评产品</p>
					<div class="HotProduct_main">
						<ul>
							<li >
								<img src="img/hotproduct_icon01.png" alt="1" style="width: 300px;"/>
								<p class="comment"> 超值正品，再也不会担心头那里时间久了坏掉，感觉升级版萌萌哒，既好用又好看</p>
								<p class="user">来自于 香草忘忧 的评价</p>
								<span style="color: black;">米兔手机U盘</span> <span class="price">49.9元</span>
							</li>
							<li style="margin-left: 33px;">
								<img src="img/hotproduct_icon02.png" alt="1" style="width: 300px;"/>
								<p class="comment"> 绝对5星，音质挺好，包装也不错，物流也快</p>
								<p class="user">来自于 星星活火 的评价</p>
								<span style="color: black;">小米活塞耳机 标准版</span> <span class="price">49.9元</span>
							</li>
							<li style="margin-left: 33px;">
								<img src="img/hotproduct_icon03.png" alt="1" style="width: 300px;"/>
								<p class="comment">做工没的说，摸起来非常细腻，而且比传统的插板稳固</p>
								<p class="user">来自于 林新城 的评价</p>
								<span style="color: black;">小米插线板</span> <span class="price">49元</span>
							</li>
							<li style="margin-left: 34px;">
								<img src="img/hotproduct_icon04.png" alt="1" style="width: 300px;"/>
								<p class="comment"> 一如既往的发烧体验，炫酷外形，人性的设计，动听的音质！高低音表现平衡</p>
								<p class="user">来自于 人生如戏 的评价</p>
								<span style="color: black;">小米头戴式耳机 标准版</span> <span class="price">499元</span>
							</li>
						</ul>
					</div>
					<!-- 内容 -->
					<div class="content">
						<p style="color: black; font-size: 22px;">内容</p>
						<div class="content_main">
							<ul>
								<li style="border-top: 1px solid #ffb121;">
									<p class="p1" style="color: #ffb121;">图书</p>
									<a href="#">阿弥陀佛，么么哒</a>
									<p class="p2">
										大冰新书，12个不舍得读完的、暖心
											的，真实的江湖故事
									</p>
									<p class="p3">9.99元</p>
									<img src="img/classify_icon01.png" alt="" />
								</li>
								<li style="border-top: 1px solid #a3c889;margin-left: 33px;">
									<p class="p1" style="color: #a3c889;">主题</p>
									<a href="#">主题市场</a>
									<p class="p2">
										众多个性主题、百变锁屏与自由桌面
											让你的手机与众不同！
									</p>
									<p class="p3">MIUI</p>
									<img src="img/classify_icon02.png" alt="" />
								</li>
								<li style="border-top: 1px solid #e74e58;margin-left: 33px;">
									<p class="p1" style="color: #e74e58;">游戏</p>
									<a href="#">米柚手游模拟器</a>
									<p class="p2">在电脑上玩遍小米所有手游</p>
									<p class="p3">免费</p>
									<img src="img/classify_icon03.png" alt="" />
								</li>
								<li style="border-top: 1px solid #2196f3;margin-left: 34px;">
									<p class="p1" style="color: #2196f3;">应用</p>
									<a href="#">2015年度应用</a>
									<p class="p2">精彩世界，尽情下载</p>
									<p class="p3">免费</p>
									<img src="img/classify_icon04.png" alt="" />
								</li>
							</ul>
						</div>
					</div>
				</div>
<!--------------------------- 视频--------------- -->
				<div class="video">
					<p style="color: black; font-size: 22px;">视频</p>
					<div class="video_main">
						<ul>
							<li>
								<img src="img/video_icon01.jpg" alt="">
								<p class="p1">笑喷了，沈腾爆笑出演，6集联播</p>
								<p class="p2">小米Max沈腾爆笑预告全集</p>
							</li>
							<li style="margin-left: 33px;">
								<img src="img/video_icon02.jpg" alt="">
								<p class="p1">小米2016春季新品发布会</p>
								<p class="p2">小米5 十余项黑科技亮相</p>
							</li>
							<li style="margin-left: 33px;">
								<img src="img/video_icon03.jpg" alt="">
								<p class="p1">15秒了解小米5 有多快</p>
								<p class="p2">华少用超快语速告诉你小米5 到底有多快</p>
							</li>
							<li style="margin-left: 34px;">
								<img src="img/video_icon04.jpg" alt="">
								<p class="p1">《去探索》 小米年度品牌视频</p>
								<p class="p2">与小米一起探索黑科技</p>
							</li>
						</ul>
					</div>
				</div>
				</div>
			</div>
		</main>
		<!-- ----------------页尾------------------------- -->
		<footer>
			<div id="footer_main1">
			<div class="main_part1">
				<ul>
					<li><i class="i1"></i><a href="#">1小时快修服务</a></li>
					<li><i class="i2"></i><a href="#">7天无理由退货</a></li>
					<li><i class="i3"></i><a href="#">15天免费换修</a></li>
					<li><i class="i4"></i><a href="#">满150元包邮</a></li>
					<li style="width: 169px;"><i class="i5"></i><a href="#">520余家售后网点</a></li>
				</ul>
			</div>
			<div class="footer_container">
				<!-- 帮助中心栏 -->
				<div class="column">
					<h3>帮助中心</h3>
					<ul>
						<li><a href="#">购物指南</a></li>
						<li><a href="#">支付方式</a></li>
						<li><a href="#">配送方式</a></li>
					</ul>
				</div>
				<!-- 服务支持栏 -->
				<div class="column" style="margin-left: 39px;">
					<h3>服务支持</h3>
					<ul>
						<li><a href="#">售后政策</a></li>
						<li><a href="#">自助服务</a></li>
						<li><a href="#">相关下载</a></li>
					</ul>
				</div>
				<!-- 线下门店栏 -->
				<div class="column" style="margin-left: 39px;">
					<h3>线下门店</h3>
					<ul>
						<li><a href="#">小米之家</a></li>
						<li><a href="#">服务网点</a></li>
						<li><a href="#">线下专区</a></li>
					</ul>
				</div>
				<!-- 关于小米栏 -->
				<div class="column" style="margin-left: 39px;">
					<h3>关于小米</h3>
					<ul>
						<li><a href="#">了解小米</a></li>
						<li><a href="#">加入小米</a></li>
						<li><a href="#">联系我们</a></li>
					</ul>
				</div>
				<!-- 关注我们栏 -->
				<div class="column" style="margin-left: 39px;">
					<h3>关注我们</h3>
					<ul>
						<li><a href="#">新浪微博</a></li>
						<li><a href="#">小米部落</a></li>
						<li><a href="#">官方微信</a></li>
					</ul>
				</div>
				<!-- 特色服务栏 -->
				<div class="column " style="margin-left: 39px;">
					<h3>特色服务</h3>
					<ul>
						<li><a href="#">F码通道</a></li>
						<li><a href="#">小米移动</a></li>
						<li><a href="#">防伪查询</a></li>
					</ul>
				</div>
				<!-- 右侧栏：客服信息栏-->
				<div class="column contact_column">
					<h3>400-100-5678</h3>
					<p>周一至周日 8:00-18:00</p>
					<p>（仅收市话费）</p>
					<a href="#">24消失在线客服</a>
				</div>
			</div>
			</div>
			<div id="footer_main2">
				<div class="main2_part1">
					<img src="img/team_logo.png" alt="" />
					<div class="part1_1">
					<ul>
						<li><a href="#">小米网</a></li>
						<li><a href="#">MIUI</a></li>
						<li><a href="#">米聊</a></li>
						<li><a href="#">多看书城</a></li>
						<li><a href="#">小米路由器</a></li>
						<li><a href="#">视频电话</a></li>
						<li><a href="#">小米后院</a></li>
						<li><a href="#">小米天猫店</a></li>
						<li><a href="#">小米淘宝直营店</a></li>
						<li><a href="#">小米网盟</a></li>
						<li><a href="#">问题反馈</a></li>
						<li><a href="#">Select Region</a></li>
					</ul>
					</div>
					<div>
					<p>©mi.com京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号 违法和不良信息举报 电话：185-0130-1238</p>
					<p>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
					</div>
				</div>
				<div class="main2_part2">
					<ul>
						<li><i class="i1"></i><span>网上交易保障中心</span></li>
						<li><i class="i2"></i><span>可信网站信用评价</span></li>
						<li><i class="i3"></i><span>诚信网站师范企业</span></li>
					</ul>
				</div>
				<div class="word"><p>探索黑科技，小米为发烧而生</p></div>
			</div>
		</footer>
		
	</body>
</html>
